<template>
  <div class="dizhi">
    <div class="dit">
      <van-nav-bar
        title="编辑地址"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="dim">
      <van-address-edit ref="info" :data="list"
        :area-list="areaList"
        :address-info="editaddress"
        show-delete
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>

  </div>
</template>

<script>
import { addaddress } from '../api/address'
import areaList from '../assets/area'
import { editaddress,getaddress } from '../api/address'

export default {
  data() {
    return {
      areaList,
      id: '',
      editaddress:{},
      list:[]
    }
  },

  methods: {
    onSave() {
      const xinxi = {
        receiver: this.$refs.info.data.name,
        mobile: this.$refs.info.data.tel,
        regions: this.$refs.info.data.province+this.$refs.info.data.city+this.$refs.info.data.county,
        address: this.$refs.info.data.addressDetail,
        isDefault: this.$refs.info.data.isDefault
      }
      if(this.id){
        editaddress(this.id,xinxi)
      }else{
        addaddress(xinxi);
      }
      this.$router.push('/dz');
      // console.log(xinxi)

      // console.log(this.id);
    },
    onDelete() {

    },
    onClickLeft(){
      this.$router.push({name:'DiZhi'});
    },
    onChangeDetail(val) {

    }
  },
  async created() {
    this.id = this.$route.query.id;
    const rs = await getaddress(this.id)
    this.list = rs.data;
    console.log(rs)
    // this.shuju = this.$route.params;
    // // console.log(this.shuju.regions);
    this.editaddress = {
      name: this.list.receiver,
      tel: this.list.mobile,
      province: this.list.regions,
      county:'',
      addressDetail:this.list.address
    }
    console.log(this.editaddress)

  }
}
</script>

<style scoped>
.dizhi{
  width: 100%;
}
</style>
